<template>
  <div class="my_devices" v-loading="loading_first">
    <p class="title">{{$t('DEVICE.MYDEVICES')}}</p>
    <div class="my_devices_category">
      <div id="my_devices_category_item">
        <p :class="first_type_product_id == '' ? 'active': ''" @click="chooseCategory()" >{{$t('DEVICE.ALLDEVICES')}}({{numList[0]}})</p>
        <p v-for="(item, index) in firstTypeList" :class="first_type_product_id == item.product_ids ? 'active': ''" @click="chooseCategory(item.product_ids)" :key="item.id">{{item.label}}({{numList[index+1]}})</p>
      </div>
      <p class="add_word" @click="() => closeAddDialog(1)">{{$t('DEVICE.ADDEVICES')}}</p>
      <i @click="() => closeAddDialog(1)" class="iconfont icon-addimage"></i>
    </div>

    <div class="my_devices_content pcShow" v-loading="loading" v-if="listData.length> 0 && !isPhone">
      <p class="opts_add"  v-if="isPhone" @click="closeAddDialog()"><i class="icon-add iconfont"></i><span>{{$t('DEVICE.ADDEVICES')}}</span></p>
      <div class="my_devices_item" v-for="item in listData" :key="item.httpImage">
        <div class="my_devices_item_header">
          <el-image :src="item.product_image"></el-image>
          <div class="my_devices_item_content">
            <div class="my_devices_item_show">
              <div class="my_devices_item_show_title">
                <p > {{item.product_title}} </p>
                <p class="del_word" @click="closeDelDialog(item)">{{$t('DEVICE.DEVICEDEL')}} </p>
                <i @click="closeDelDialog(item)" class="iconfont icon-delete_normal"></i>
              </div>
              <p>{{$t('DEVICE.ORDERID')}}: {{item.order_no}}</p>
              <span class="first_type">{{item.first_type}}</span>
            </div>
          </div>
        </div>
        <transition name="slide-fade"  >
            <div  class="my_devices_item_hide" v-show="item.isDevicesShow">
              <p class="fontsize16">{{$t('DEVICE.DEVICERIGHTS')}}</p>
              <p class="fontsize14 margintop8">
                <span>{{$t('DEVICE.WARRANTYSTATUS')}}:</span>
                <span v-if="item.w_status" class="outwarranty">{{$t('DEVICE.OUTWARRANTY')}}</span>
                <span v-else class="underwarranty">{{$t('DEVICE.UNDERWARRANTY')}}</span></p>
              <p class="fontsize14"><span>{{$t('DEVICE.ORDERDATE')}}:</span><span>{{item.buy_time}}</span></p>
              <p class="fontsize14">
                <span>{{$t('DEVICE.WARRANTYDEADLINE')}}:</span>
                <span v-if="!item.estimated_warranty_deadline">{{$t('DEFAULT.LIFETIMEWARRANTY')}}</span>
                <span v-else>{{item.estimated_warranty_deadline}}</span>
              </p>
              <p class="fontsize14">{{$t('DEVICE.WARRANTYCOVERAGE')}}:</p>
              <p class="fontsize14color" v-html="$t('DEVICE.WARRANTYCOVERAGETIP')"></p>
              <p  class="fontsize16">{{$t('DEVICE.WARRANTYRIGHTS')}}</p>
              <p class="warranty_benefits_item margintop8" :class="{'disabled': warranty_status == 0}">{{$t('WARRANTYGUIDE.BETATESTERONE')}}
                <i class="iconfont icon-yes_normal "></i>
                <i class="iconfont icon-no_normal "></i>
              </p>
              <p class="warranty_benefits_item" :class="{'disabled': warranty_status == 0 }">{{$t('WARRANTYGUIDE.BETATESTERTWO')}}
                <i class="iconfont icon-yes_normal "></i>
                <i class="iconfont icon-no_normal "></i>
              </p>
              <p class="warranty_benefits_item " :class="{'disabled': warranty_status == 0 || warranty_status == 2}">{{$t('WARRANTYGUIDE.BETATESTERTHREE')}}
                <i class="iconfont icon-yes_normal "></i>
                <i class="iconfont icon-no_normal "></i>
              </p>
              <a href="/warranty" v-if=" warranty_status == 0  && isRequest"> <el-button type="search">{{$t('DEFAULT.LIFETIMEWARRANTY')}}</el-button>
              </a>
              <!-- <a href="/my_devices" v-else-if=" warranty_status == 1"><el-button type="search">My device</el-button></a> -->
              <a href="/warranty_active" v-else-if=" warranty_status == 2 && isRequest"> <el-button type="search">{{$t('DEVICE.SUBSCRIBEEMAIL')}}</el-button> </a>
            </div>
        </transition>
        <div class="my_devices_item_button"  @click="isShowDevice(item)">
          <transition name="fade" mode="out-in">
            <span v-show="!item.isDevicesShow">
              <svg class="icon-arrow_normal" aria-hidden="true" >
                <use xlink:href="#icon-arrow_normal"></use>
              </svg>
            </span>
            <!-- <i class="iconfont icon-arrow_normal " v-show="!item.isDevicesShow"></i> -->
          </transition>
          <transition name="fade" mode="out-in">
            <span v-show="item.isDevicesShow">
              <svg class="icon-arrow_actived" aria-hidden="true" >
                <use xlink:href="#icon-arrow_actived"></use>
              </svg>
            </span>
          </transition>
         
        </div>

      </div>
 

     <el-pagination v-show="listData.length> 10"  style="text-align: right;"  ref="pagination" :page-size="page_size" :total="total" layout="prev, pager, next, jumper" 
      :current-page="page" @current-change="handleCurrentChange"></el-pagination>
    <!-- <p class="more" v-show="is_load_show" @click="getScrollList()"><el-button type="search">Load More</el-button> </p> -->

    </div>

    <div class="my_devices_content phoneShow" v-loading="loading" v-show="listData.length> 0 && isPhone">
      <p class="opts_add"  @click="closeAddDialog()"><i class="icon-add iconfont"></i><span>{{$t('DEVICE.ADDEVICES')}}</span></p>
      <div class="my_devices_item_container" v-for="(item, index) in listData" :key="item.httpImage" data-type="0">
        <div class="my_devices_item"  :class="{'lastDom':index== listData.length -1}" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
          <div class="my_devices_item_header">
            <el-image :src="item.product_image"></el-image>
            <div class="my_devices_item_content">
              <div class="my_devices_item_show">
                <div class="my_devices_item_show_title">
                  {{item.product_title}}
    
                </div>
                <p>{{$t('DEVICE.ORDERID')}}: {{item.order_no}}</p>
                <span class="first_type">{{item.first_type}}</span>
              </div>
            </div>
          </div>
          <div class="my_devices_item_details_btn" @click="closeDetailsDialog(item)">View Details</div>
        </div>
        <div class="my_devices_item_del">
          <i class="iconfont icon-delete_normal"></i>
        </div>
      </div>
     
      </div>
    <div class="my_devices_no_data pcShow" v-loading="loading" v-if="listData.length == 0 && !isPhone" >
      <p>{{$t('DEVICE.BINDRAMPOW')}}</p>
      <el-button @click="closeAddDialog()" type="search">{{$t('DEVICE.ADDEVICES')}}</el-button>
    </div>
    <div class="my_devices_no_data phoneShow" v-loading="loading" v-if="listData.length == 0 && isPhone" >
      <p class="opts_add" @click="closeAddDialog()"><i class="icon-add iconfont"></i><span>{{$t('DEVICE.ADDEVICES')}}</span></p>
      <p class="tip_bind">{{$t('DEVICE.BINDRAMPOW')}}</p>
    </div>
    <Del v-show="delShow"  :show="delShow" @closeDialog="closeDelDialog"></Del>
    <Add v-show="addShow"  :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Bind v-show="bindShow" :show="bindShow" @closeDialog="closeBindDialog"></Bind>
    <DevicesDetails  :data="curDevices" :warranty_status="warranty_status" :show="DetailsShow" @closeDialog="closeDetailsDialog"></DevicesDetails>


    
  </div>
</template>

<script>
import {  Del, Add, Bind, DevicesDetails } from './components'
import { mapGetters } from 'vuex'
import { list, firstTypeList, allCount } from '@/api/personalCenter/devices.js'
import { myBenefits } from '@/api/common/personal.js'
export default {
  data(){
    return {
      delShow: false,
      addShow: false,
      bindShow: false,
      isDevicesShow: false,
      DetailsShow: false,
      page_size: 15,
      total: 0,
      page: 1,
      deviceSearchList: [],
      firstTypeList: [], //一级类型
      firstTypeProductIds: [], //一级类型
      numList: ['0'], // 一级类型的数量
      listData: [], //设备列表
      first_type_product_id: '', // 
      del_item: [], //删除id,
      warranty_status: 0,
      beta_tester_status: 1,
      isRequest: false,
      is_load_show: false,
      loading: false,
      loading_first: false,
      isBack: false,
      curDevices: {},
      startX: 0,
      endX: 0
    }
  },
  watch : {
    curSite: function() {
      this.getFirstTypeList()
    },
    userInfo:function(){
      if(this.userInfo.email){
        this.getMyBenefits()
      }
    },
  },
  computed: {
    ...mapGetters([ 'userInfo', 'curSite', 'isPhone']),
  },
  components: { Del, Add, Bind, DevicesDetails },
  created() {
    this.loading_first = true
    this.getFirstTypeList()
  },
  mounted() {
    if(this.userInfo.email){
      this.getMyBenefits()
    }
  },
  methods: {
     //滑动开始
    touchStart(e){
      // 记录初始位置
      this.startX = e.touches[0].clientX;
    },
    //滑动结束
    touchEnd(e){
                // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
        // 左滑
      if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){
        this.restSlide();
        parentElement.dataset.type = 1;
      }
                // 右滑
      if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    //判断当前是否有滑块处于滑动状态
    checkSlide(){
      let listItems = document.querySelectorAll('.my_devices_item_container');
      for( let i = 0 ; i < listItems.length ; i++){
        if( listItems[i].dataset.type == 1 ) {
          return true;
        }
      }
      return false;
    },
    //复位滑动状态
    restSlide(){
      let listItems = document.querySelectorAll('.my_devices_item_container');
                // 复位
      for( let i = 0 ; i < listItems.length ; i++){
      listItems[i].dataset.type = 0;
      }
    },
    getMyBenefits(){
      let params = {
        email: this.userInfo.email
      }
      myBenefits(params).then(res=>{
        let data = res.data;
        let w_status  = data.w_status
        this.warranty_status = w_status
        this.isRequest = true
      })
    },
    chooseCategory (first_type_product_id) {
      this.page = 1
      if(first_type_product_id) {
        this.first_type_product_id = first_type_product_id
      } else {
        this.first_type_product_id = ''
      }
      this.scrollCategory() 
    },
    scrollCategory () {
      this.$nextTick(() => {
        let activeObj = document.getElementById('my_devices_category_item').getElementsByClassName('active')[0]
        let selectMenu = document.getElementById('my_devices_category_item')
        let left = activeObj.offsetLeft - selectMenu.offsetLeft
        selectMenu.scrollTo({
          left: left,
          behavior: 'smooth'
        });
        this.getList()
      })
    },
    getAllCount () {
      let params = {
        first_type: JSON.stringify(this.firstTypeProductIds)
      }
      allCount(params).then(res => {
        this.numList = res.data
        this.first_type_product_id = ''
        this.getList()
      })
    },
    getFirstTypeList (){
      let params = {
        site_id: this.curSite.id,
      }
      firstTypeList(params).then(res=>{
        let data = res.data 
        for(let i = 0; i< data.length; i++) {
          this.firstTypeProductIds.push(data[i].product_ids)
        }
        this.firstTypeList = data
        this.getAllCount()
      })
    },
    getScrollList () {
      this.loading = true
      this.page +=1
      let params = {
        first_type_product_id: this.first_type_product_id,
        page: this.page,
      }
      list(params).then(res=>{
        let data = res.data
        let list = this.listWarrantyStutas(data.data)
        if(params.page > 1) {
          this.listData = this.listData.concat(list)
        } else {
          this.listData = list
        }
        this.page = data.current_page
        this.total = data.total
        this.is_load_show = data.total - this.listData.length > 0
        this.loading = false
      })
    },
    getList () {
      this.loading = true
      let params = {
        first_type_product_id: this.first_type_product_id,
        page: this.page,
      }
      list(params).then(res=>{
        let data = res.data
        let list = this.listWarrantyStutas(data.data)
        this.listData = list
        this.page = data.current_page
        this.total = data.total
        this.is_load_show = data.total - this.listData.length > 0
        this.loading = false
        this.loading_first= false
      })
    }, 
    listWarrantyStutas (list) { // warrantystatus 保内保外
      for(let i = 0; i < list.length; i++) {    
        list[i].isDevicesShow = false    
        if(list[i].warranty_expiration_date) {
          let nowDate = new Date().getTime()
          let deadlineDate = new Date(list[i].warranty_expiration_date).getTime()
          if(nowDate > deadlineDate) {
             list[i].w_status = true
          }
        }

        if(list[i].w_status) {
           list[i].w_status = false
        }
      }
      return list

    },
    isShowDevice(item) {
      if(!item.isDevicesShow) {
        for(let i = 0; i < this.listData.length; i++) {
          if(this.listData[i].id == item.id){
            item.isDevicesShow = !item.isDevicesShow
          } else {
            this.listData[i].isDevicesShow = false
          }
        }
      } else {
        item.isDevicesShow = !item.isDevicesShow
      }

    },
     handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    closeDelDialog(item){
      if(item ) {
        this.del_item = item
      }
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getAllCount()
      }
    },
    closeAddDialog (value){
      this.addShow = !this.addShow
      if(value == 2){
        this.closeBindDialog()
      }
      if(value == 1) {
        this.isBack = false
      } else {
        this.isBack = true
      }
    },
    closeBindDialog (data) {
      this.bindShow = !this.bindShow
      if(!this.bindShow) {
        if(!data) {
          this.closeAddDialog()
        } else if(data == 1) {
          this.getAllCount()
        // } else if(data == 2) { // 关闭bind弹窗
        //   console.log('关闭bind弹窗')
        }
      }
    },
    closeDetailsDialog(data){
      this.DetailsShow = !this.DetailsShow
      if(this.DetailsShow) {
        if(data) {
          this.curDevices = data
        }
      } else {
        this.getAllCount()
      }
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/personal_center/my_devices.scss';
</style>